<template>
    <div class="goodinfo-container">

       <transition 
       @before-enter="beforeEnter"
       @enter="enter"
       @after-enter="afterEnter">
           <div class="ball" v-show="ballFlag" ref="ball"></div>
       </transition>
        

        <!--商品轮播图区域 -->
        <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<!-- <swiper :lunbotuList="lunboList"></swiper> -->
                        <mt-swipe :auto="4000">
                            <mt-swipe-item v-for="(item,index) in lunboList" :key="index">
                                <img :src="item" alt="">
                            </mt-swipe-item>
                        </mt-swipe>
                    </div>
				</div>
			</div>
            <!-- 商品购买区域 -->
             <div class="mui-card">
				<div class="mui-card-header">{{ goodsInfo.goods_name }}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="price">
                            市场价: <del>￥{{ goodsInfo.min_normal_price }}</del>&nbsp;&nbsp;&nbsp;
                            销售价: <span class="now_price">￥{{ goodsInfo.min_group_price }}</span>
                        </p>
                        <p>购买数量: 
                            <numberbox @getcount="getSelectedCount" :maxcount="goodsInfo.coupon_remain_quantity"></numberbox>
                        </p>
                        <p>
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger"  size="small" @click="addToCart">加入购物车</mt-button>
                        <!--如何实现点击加入购物车的同时拿到所选择的数量：
                         1.这里涉及到子组件(goods_numberbox.vue)向父组件(GoodsInfo.vue)传值(事件调用机制)
                         2.事件调用机制的本质: 父向子传方法,子调用这个方法,同时把数据作为参数传递给这个方法
                        -->
                        </p>
					</div>
				</div>
			</div>
            <!-- 商品参数区域 -->
            <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号: {{ goodsInfo.goods_id }}</p>
						<p>库存情况: {{ goodsInfo.coupon_remain_quantity }}</p>
						<p>上架时间:  2020-05</p>
					</div>
				</div>
                <div class="mui-card-footer">
                    <mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
                    <mt-button type="danger" size="large"  plain @click="goComment(id)">商品评论</mt-button>
                </div>
			</div>
    </div>
</template>

<script>
//import swiper from '../subcomponents/Swiper.vue'
import numberbox from '../subcomponents/goodsInfo_numberbox.vue'

const API_PROXY = 'https://bird.ioliu.cn/v1/?url=' 
import { Toast } from 'mint-ui'

export default {
    data(){
        return {
             key: '89c62486-da1e-04d3-d2a2-fef18a9829b6',
             id: this.$route.params.id,
             goodsInfo: [],
             lunboList: [],
             ballFlag: false,
             selectedCount: 1
        }
    },
    created() {
        this.getGoodsInfo()
    },
    methods: {
        getGoodsInfo(){
            let _this = this
            _this.$axios.get(API_PROXY + 'http://api.web.21ds.cn/pinduoduo/getGoodsDetailInfo?apkey=' + _this.key + '&goods_id_list=["' + _this.id +'"]')
                .then(function (response) {
                        console.log(response.data.data[0])
                        _this.goodsInfo = response.data.data[0]
                    //  response.data.data.forEach(item=>{
                    //     _this.lunboList=item.goods_gallery_urlss
                    //  })
                        _this.lunboList=_this.goodsInfo.goods_gallery_urls
                    })
                .catch(function (err) {
                Toast(err)
                })
        },
        goDesc(id){
               //点击使用编程式导航
               this.$router.push({name: 'goodsdesc', params: { id } })
        },
        goComment(id){
               this.$router.push({name: 'goodscomment', params: { id } })
        },
        addToCart(){
            this.ballFlag = !this.ballFlag
        },
        beforeEnter(el){
              el.style.transform = "translate(0,0)";
        },
        enter(el, done){
              el.offsetWidth;
            //小球动画优化思路
            //1. 导致动画位移位置不准确的根本原因: 把小球位移的终点位置写死了,
            //当分辨率变化或者滚动条滚动时小球的终点位置就改变了
            //2. 必须动态获取小球的终点位置
            //3. 徽标与小球位置的横纵坐标的差值就是动态获取了小球的准确终点位置的位移距离
            //4. 用domObject.getBoundingClientRect()方法获取位置
              
              //获取小球在页面中的位置
              const ballPosition = this.$refs.ball.getBoundingClientRect();
              //获取徽标在页面中的位置
              const badgePosition = document
              .getElementById('badge')
              .getBoundingClientRect();

              const xDist = badgePosition.left - ballPosition.left;
              const yDist = badgePosition.top - ballPosition.top;
              
              el.style.transform = `translate(${xDist}px, ${yDist}px)`;
              el.style.transition = 'all 0.7s cubic-bezier(.4,-0.3,1,.68)';
              done()
        },
        afterEnter(el){
              this.ballFlag = !this.ballFlag
        },
        getSelectedCount(count){
            //子组件把选定的数量传递给父组件时,把该数量的值保存到父组件的data(){}中
              this.selectedCount = count
              console.log(this.selectedCount)
        }
    },
    components: {
       // swiper
       numberbox
    }
    
}
</script>

<style lang="scss" scoped>
.goodinfo-container{

    background-color: #eee;
    overflow: hidden;
    .mint-swipe{
    height: 200px;
     .mint-swipe-item{
        text-align: center;
        img{
           // width: 100%;
            height: 100%;
        }
     }
  }

  .now_price{
     color: red;
     font-size: 16px;
     font-weight: bold;
  }
  .mui-card-footer{
      display: block;
      button{
          margin: 15px 0;
      }
  }

  .ball{
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: red;
      position: absolute;
      z-index: 99;
      top: 408px;
      left: 142px;
      
  }
}
</style>